<template>
    <div class="flex min-h-screen">
      <!-- 背景图部分 -->
      <div class="flex-1" style="background-image: url('/123.jpg'); background-size: cover;"></div>
  
      <!-- 登录框部分 -->
      <div class="flex-1 flex flex-col justify-center items-center">
        <el-form ref="loginForm" class="w-full max-w-xs" @submit.native.prevent="login">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="w-full" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
  
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
    },
    setup() {
      const loginForm = ref({
        username: '',
        password: '',
      })
  
      const login = () => {
        console.log('登录信息：', loginForm.value)
        // 在这里处理登录逻辑
      }
  
      return {
        loginForm,
        login,
      }
    },
  }
  </script>
  
  <style scoped>
  </style>
  